import { useState, useEffect } from 'react';
import { 
  Chart,
  Interval,
  Line,
  View,
  Axis,
} from 'bizcharts';
import * as api from './api';
import { setInterval } from 'timers';

export interface IDataItem {
  dimension: string;
  data: Array<{ year: string; value: number }>;
}

export interface IOutputDataItem {
  dimension: string;
  year: string;
  value: number;
}

function App() {

  const [data, setData] = useState<IOutputDataItem[]>([]);

  useEffect(() => {
    setInterval(async () => {
      const res = await api.getData();
      setData(res);
    }, 1000);
  }, []);

  if (!data.length) {
    return null;
  }

  return (
    <div className="App">
      <Chart 
        height={ 500 } 
        autoFit 
        scale={{ 
          value: { 
            min: 0, 
            max: Math.max(...data.map(d => d.value)),
          } 
        }}
      >
        <View data={ data.slice(0, 6) }>
          <Interval
            position="year*value"
            color="red"
          />
        </View>
        <View data={ data.slice(6) }>
          <Line
            position="year*value"
            color="blue"
          />
        </View>
      </Chart>
    </div>
  );
}

export default App;
